<template>
    <div>
        <page-main>
            <!-- 筛选栏 -->
            <search-bar>
                <el-form :model="search" size="small" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="创建时间">
                                <el-date-picker
                                    v-model="search.date"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    @change="handleDateChange"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="门店">
                                <el-select v-model="search.mendian_id" placeholder="请选择线门店" clearable>
                                    <el-option v-for="item, index in dict.mendianList" :key="index" :label="item.name" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="来源渠道">
                                <el-select v-model="search.from_id" clearable placeholder="请选择">
                                    <el-option v-for="(item, index) in dict.from_list" :key="index" :label="item.name" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" @click="getList">查询</el-button>
                                <el-button @click="handleReset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>
        </page-main>
        <page-main>
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <el-table-column prop="type" label="线索名称" width="180">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="userDetail(scope.row)">{{ scope.row.name }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="140" />
                <el-table-column prop="city" label="申请城市" width="140" />
                <el-table-column prop="status" label="来源">
                    <template #default="scope">
                        <span>{{ scope.row.manyData.adAccountId }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="dept_name" sortable label="分配商户" />
                <el-table-column prop="status" label="分配结果">
                    <template #default>
                        <span>成功</span>
                    </template>
                </el-table-column>
                <el-table-column prop="member" label="分配销售" />
                <el-table-column prop="created" label="分配时间" />
            </el-table>
            <!-- 分页 -->
            <div style="margin-top: 20px; text-align: right;">
                <el-pagination
                    :current-page="search.pages"
                    :page-size="search.limit"
                    :total="search.total"
                    :page-sizes="[10, 20, 50, 100]"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </page-main>
        <!-- 客户详情 -->
        <user-detail-drawer ref="userDetailDrawer" @success="getList" />
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { fromData } from '@/api/clue'
import UserDetailDrawer from '../clue/components/DetailDrawer'
export default {
    name: 'OrderList',
    components: {
        UserDetailDrawer
    },
    filters: {
        typeFilter(val) {
            const map = {
                1: '体验',
                2: '新购',
                3: '增购',
                4: '复购'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                1: '进行中',
                2: '已完成'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                start: '',
                end: '',
                mendian_id: '',
                from_id: '',
                pages: 1,
                limit: 10,
                total: 0
            },
            dataList: []
        }
    },
    computed: {
        ...mapState(["dict"])
    },
    mounted() {
        this.getList();
    },
    methods: {
        userDetail(row) {
            this.$refs.userDetailDrawer.showDialog({id: row.id}, {}); 
        },
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.search.mendian_id = '';
            this.search.start = '';
            this.search.end = '';
            this.search.from_id = '';
            this.search.pages = 1;
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            fromData(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                    this.search.total = Number(res.data.count);
                    this.order_price = res.data.order_price;
                    this.count = res.data.count;
                    this.order_no_collection = res.data.order_no_collection;
                    this.order_collection = res.data.order_collection;
                }
                this.loading = false;
            })
        },
        handleDateChange(e) {
            this.search.start = e ? e[0] : ''
            this.search.end = e ? e[1] : ''
        }
    }
}
</script>
